<template>
  <div class="con">
    <div class="contbox6_10">
      <p class="titlelist6_10">
        积分管理<span style="color: #999;">&nbsp;&nbsp;/&nbsp;&nbsp;</span>明细
      </p>
      <div class="content">
        <div class="sousuojg6_10">
          <el-form ref="form" :model="form" label-width="100px">
            <el-form-item label="机构ID" style="float: left;">
              <el-input
                v-model="form.officeUid"
                style="width: 200px;margin-right: 40px;"
              ></el-input>
            </el-form-item>
            <el-form-item label="机构名称" style="float: left;">
              <el-input
                v-model="form.officeName"
                style="width: 200px;"
              ></el-input>
            </el-form-item>

            <el-form-item label="发放类型" style="float: left;">
              <el-select
                v-model="form.status"
                clearable
                placeholder="请选择类型"
              >
                <el-option label="全部" value=""></el-option>
                <el-option label="增加" value="0"></el-option>
                <el-option label="扣除使用" value="1"></el-option>
                <el-option label="冻结" value="2"></el-option>
                <el-option label="OEM手动修改" value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="时间">
              <el-date-picker
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="开始日期"
                v-model="form.startDate"
                style="width: 100%;"
              ></el-date-picker>
              <span class="line" :span="1" style="text-align: center;">-</span>
              <el-date-picker
                v-model="form.endDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="结束时间"
                style="width: 40%;"
              >
              </el-date-picker>
            </el-form-item>
          </el-form>
        </div>
        <div class="buttons">
           <el-button type="primary" @click="onSubmit">搜索</el-button>
              <el-button style="margin-left: 10px" type="" @click="reset"
                >重置</el-button
              >
               <el-button
               type="primary"
               class="butt"
          style="margin-left:40px"
          @click="exportes()"
        >
          批量导出
        </el-button>
        <el-button
        type="primary"
          class="butt"
          @click="cancal"
        >
          取消
        </el-button>
        </div>
        <el-table
          ref="multipleTable"
          :data="tableData"
          :header-cell-style="{ background: '#F9FAFC', color: '#222' }"
          stripe
          border
          @selection-change="handleSelectionChange"
          :row-style="{ height: '0px' }"
          :cell-style="{ padding: '0px' }"
          v-loading="listLoading"
        >
          <el-table-column type="selection" min-width="55"> </el-table-column>
          <el-table-column prop="officeUid" label="机构ID" min-width="300">
          </el-table-column>
          <el-table-column prop="officeName" label="机构名称" min-width="120">
          </el-table-column>
          <el-table-column prop="points" label="积分数值" min-width="120">
          </el-table-column>
          <el-table-column
            prop="dealMoney"
            label="实际支付金额"
            min-width="120"
          >
          </el-table-column>
          <el-table-column prop="createDate" label="获取时间" min-width="120">
          </el-table-column>
          <el-table-column prop="status" label="发放类型" min-width="120">
          </el-table-column>
        </el-table>
        <div></div>
        <el-pagination
          style="text-align: right;"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="form.page"
          :page-sizes="[20, 50, 100]"
          :page-size="form.number"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalNum"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "route",
  data() {
    return {
      tableData: [], //数据
      currentPage: 1, //默认显示第一页
      pageSize: 1, //默认每页显示10条
      totalNum: 1000, //总页数
      msg: [],
      form: {
        officeUid: "",
        officeName: "",
        status: "",
        startDate: "",
        endDate: "",
        page: 1,
        number: 20,
        id: sessionStorage.getItem("jifenId")
      },
      tableData: [],
      multipleSelection: [],
      // urltype: this.GLOBAL.httpurl,
      typebox: ""
    };
  },
  // 页面初始化
  mounted: function() {
    window.scrollTo(0, 0);
    var _this = this;
    _this.typebox = localStorage.getItem("jurisdiction");

    _this.list();
  },
  components: {},

  methods: {
    cancal() {
      this.$parent.type = 1;
    },
    // 重置
    reset() {
      this.form.officeName = "";
      this.form.phone = "";
      this.form.activeName = "";
      this.form.status = "";
      this.form.oEMName = "";
      this.form.startDate = "";
      this.form.endDate = "";
      this.form.page=1
      this.form.officeUid = "";
      this.mechanism = "";
      this.dataTime = [];
      this.list();
    },
    // 搜索按钮
    onSubmit() {
      this.form.page = 1;
      this.list();
    },
    // 初始化列表
    list() {
      var _this = this;
      _this
        .axios({
          //axios请求
          method: "post",
          url: "/api/points/getPointsDetail",
          data: _this.form
        })
        .then(function(d) {
          if (d.data.code == "0000") {
            _this.tableData = d.data.data;
            for (var s = 0; s < _this.tableData.length; s++) {
              //发放类型有 已上线  未上线  已过期
              if (_this.tableData[s].status == 0) {
                _this.tableData[s].status = "增加";
              }
              if (_this.tableData[s].status == 1) {
                _this.tableData[s].status = "扣除使用";
              }
              if (_this.tableData[s].status == 2) {
                _this.tableData[s].status = "冻结";
              }
              if (_this.tableData[s].status == 3) {
                _this.tableData[s].status = "OEM手动修改";
              }
            }
            _this.totalNum = d.data.total;
          } else {
            layer.open({
              content: d.data.msg,
              skin: "msg",
              time:  2 //1秒后自动关闭
            });
          }
        })
        .catch(function(error) {
          //axios请求失败回调
          console.log(error);
        });
    },
    // 批量导出
    exportes() {
      var _this = this;
      _this
        .axios({
          //axios请求
          method: "post",
          url: "/api/member/mer/excel/export",
          responseType: "blob",
          data: _this.form
        })
        .then(function(d) {
          let blob1 = new Blob([d.data], { type: "application/vnd.ms-excel" });
          /* let objectUrl = URL.createObjectURL(blob1);
                        window.location.href = objectUrl;*/
          var date = new Date();
          var year = date.getFullYear();
          var month = date.getMonth() + 1;
          var day = date.getDate();
          var hour = date.getHours();
          var minute = date.getMinutes();
          var second = date.getSeconds();
          date =
            year +
            "" +
            month +
            "" +
            day +
            "" +
            hour +
            "" +
            minute +
            "" +
            second; //'+date+'
          var downloadElement = document.createElement("a");
          var href = window.URL.createObjectURL(blob1); //创建下载的链接
          downloadElement.href = href;
          downloadElement.download = "积分明细" + date + ".xls"; //下载后文件名
          document.body.appendChild(downloadElement);
          downloadElement.click(); //点击下载
          document.body.removeChild(downloadElement); //下载完成移除元素
          window.URL.revokeObjectURL(href); //释放掉blob对象
        })
        .catch(function(error) {
          //axios请求失败回调
          console.log(error);
        });
    },
    // 改变每页条数
    handleSizeChange(val) {
      /*alert(`每页 ${val} 条`);*/
      this.form.page = 1;
      this.form.number = val; //动态改变
      this.list();
    },
    // 改变页数
    handleCurrentChange(val) {
      /* alert(`当前页: ${val}`);*/
      this.form.page = val; //动态改变
      this.list(); /* this.currentPage = val;*/ //动态改变
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    showdou() {
      this.$refs.mychild.parentHandleclick();
    }
  }
};
</script>

<style scoped>
.con {
  position: relative;
}
/* 单独样式 */
.contbox6_10 {
  width: 100%;
  /* margin-left: 2%; */
  /* height: 87.5vh; */
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}

.buttons > .el-button {
  width: 100px;
  padding: 7px;
  height: 32px;
}
</style>
